<template>
  <div class="index">
    <div class="points">
      <ul>
        <li>
          <img src="../assets/water_n.png" width="30">
          <span class="point">没水</span>
        </li>
        <li>
          <img src="../assets/electricity_n.png" width="30">
          <span class="point">没电</span>
        </li>
        <li>
          <img src="../assets/fuelgas_n.png" width="30">
          <span class="point">没气</span>
        </li>
      </ul>
    </div>
    <br>
    <div class="home">
      <img src="../assets/roof.png" class="hometop">
      <ul>
        <li><img src="../assets/home_twelve.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: <span class="color">0m³</span>
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: 55kw/h
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: 27m³
        </div>
        </li>
        <li><img src="../assets/home_one.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 19m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: 26kw/h
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: 43m³
        </div>
        </li>
        <li><img src="../assets/home_six.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 7m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: <span class="color">0kw/h</span>
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: 32m³
        </div>
        </li>
        <li><img src="../assets/home_three.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 14m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: 40kw/h
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: <span class="color">0m³</span>
        </div>
        </li>
        <li><img src="../assets/home_ten.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 22m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: <span class="color">0kw/h</span>
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: 56m³
        </div>
        </li>
        <li><img src="../assets/home_eleven.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 4m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: 10kw/h
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: <span class="color">0m³</span>
        </div>
        </li>
        <li><img src="../assets/home_nine.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 33m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: 41kw/h
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: 16m³
        </div>
        </li>
        <li><img src="../assets/home_ten.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 47m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: <span class="color">0kw/h</span>
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: 35m³
        </div>
        </li>
        <li><img src="../assets/home_eight.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: <span class="color">0m³</span>
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: 58kw/h
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: 26m³
        </div>
        </li>
        <li><img src="../assets/home_six.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 44m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: <span class="color">0kw/h</span>
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: 62m³
        </div>
        </li>
        <li><img src="../assets/home_twelve.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: <span class="color">0m³</span>
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: 22kw/h
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: 36m³
        </div>
        </li>
        <li><img src="../assets/home_five.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 27m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: 19kw/h
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: 35m³
        </div>
        </li>
        <li><img src="../assets/home_seven.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 18m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: 8kw/h
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: <span class="color">0m³</span>
        </div>
        </li>
        <li><img src="../assets/home_nine.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 11m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: 23kw/h
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: 47m³
        </div>
        </li>
        <li><img src="../assets/home_two.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 24m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: <span class="color">0kw/h</span>
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: 32m³
        </div>
        </li>
        <li><img src="../assets/home_eleven.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 26m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: 14kw/h
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: <span class="color">0m³</span>
        </div>
        </li>
        <li><img src="../assets/home_nine.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 11m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: 23kw/h
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: 47m³
        </div>
        </li>
        <li><img src="../assets/home_one.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 19m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: 26kw/h
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: 43m³
        </div>
        </li>
        <li><img src="../assets/home_five.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 27m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: 19kw/h
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: 35m³
        </div>
        </li>
        <li><img src="../assets/home_nine.png">
        <div>
          <img src="../assets/water_icon.png" width="10">剩余: 11m³
          <br>
          <img src="../assets/electricity_icon.png" width="10">剩余: 23kw/h
          <br>
          <img src="../assets/fuelgas_icon.png" width="10">剩余: 47m³
        </div>
        </li>
      </ul>
    </div>
    <img src="../assets/cloudthree.png" width="300" class="lefttopimg">
    <img src="../assets/cloudtwo.png" width="300" class="leftbotimg">
    <img src="../assets/cloudone.png" width="300" class="righttopimg">
    <img src="../assets/cloudfour.png" width="600" class="rightbotimg">
    <img src="../assets/tree.png" class="tree">
  </div>
</template>

<script>
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index{
  background-image: url('../assets/indexBG.jpg');
  background-size: 100% 100%;
  font-family: 'NotoSansHans-Regular';
  height: 100%;
}
.index div.points{
  width: 400px;
  margin: 64px auto 0;
}
.index div.points ul{
  list-style: none;
}
.index div.points ul li{
  float: left;
  margin-left: 36px;
}
.index .home{
  position: absolute;
  width: 1200px;
  z-index: 999;
  bottom: 0px;
  left:50%;
  transform: translateX(-50%);
  text-align: left;
}
.index .home .hometop{
  width: 1170px;
  position: absolute;
  top: -20px;
  left: 34px;
}
.color{
  color: red;
}
.index .home ul{
  list-style: none;
}
.index .home ul li{
  float: left;
  width: 25%;
  height: 133.5px;
  position: relative;
}
.index .home ul li>img{
  width: 100%;
}
.index .home ul li div{
  position: absolute;
  top: 12px;
  left: 28px;
  color: #fff;
  font-size: 12px;
}
.index .home ul li div img {
  vertical-align: -10%;
  margin-right: 4px;
}
.index div.points ul li img{
  vertical-align:-50%;
}
.index div.points ul li .point{
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-left: 6px;
}
.index .tree{
  position: fixed;
  width: 100%;
  height: 50px;
  bottom: 0;
  left: 0;
  z-index: 1000;
}
.index .lefttopimg{
  position: absolute;
  top: 0px;
  left: 300px;
  -webkit-animation: lefttopimg 10s linear 1s forwards;
  -moz-animation: lefttopimg 10s linear 1s forwards;
  -o-animation: lefttopimg 10s linear 1s forwards;
}
.index .leftbotimg{
  position: absolute;
  bottom: 300px;
  left: 300px;
  -webkit-animation: leftbotimg 13s linear 4s forwards;
  -moz-animation: leftbotimg 13s linear 4s forwards;
  -o-animation: leftbotimg 13s linear 4s forwards;
}
.index .righttopimg{
  position: absolute;
  top: 26px;
  right: 800px;
  -webkit-animation: righttopimg 30s linear 2s infinite;
  -moz-animation: righttopimg 30s linear 2s infinite;
  -o-animation: righttopimg 30s linear 2s infinite;
}
.index .rightbotimg{
  position: absolute;
  bottom: 200px;
  right: 0px;
  -webkit-animation: rightbotimg 5s linear 2s forwards;
  -moz-animation: rightbotimg 5s linear 2s forwards;
  -o-animation: rightbotimg 5s linear 2s forwards;
}
@keyframes lefttopimg
{
0% {
  left: 300px;
}
100%{
  left: -50px;
}
}

@-moz-keyframes lefttopimg /* Firefox */
{
0% {
  left: 300px;
}
100%{
  left: -50px;
}
}

@-webkit-keyframes lefttopimg /* Safari 和 Chrome */
{
0% {
  left: 300px;
}
100%{
  left: -50px;
}
}

@-o-keyframes lefttopimg /* Opera */
{
0% {
  left: 300px;
}
100%{
  left: -50px;
}
}
@keyframes leftbotimg
{
0% {
  left: 300px;
}
100%{
  left: -80px;
}
}

@-moz-keyframes leftbotimg /* Firefox */
{
0% {
  left: 300px;
}
100%{
  left: -80px;
}
}

@-webkit-keyframes leftbotimg /* Safari 和 Chrome */
{
0% {
  left: 300px;
}
100%{
  left: -80px;
}
}

@-o-keyframes leftbotimg /* Opera */
{
0% {
  left: 300px;
}
100%{
  left: -80px;
}
}
@keyframes righttopimg
{
0% {
  right: 800px;
}
50%{
  right: 300px;
}
100%{
  right: 800px;
}
}

@-moz-keyframes righttopimg /* Firefox */
{
0% {
  right: 800px;
}
50%{
  right: 300px;
}
100%{
  right: 800px;
}
}

@-webkit-keyframes righttopimg /* Safari 和 Chrome */
{
0% {
  right: 800px;
}
50%{
  right: 300px;
}
100%{
  right: 800px;
}
}

@-o-keyframes righttopimg /* Opera */
{
0% {
  right: 800px;
}
50%{
  right: 300px;
}
100%{
  right: 800px;
}
}
@keyframes rightbotimg
{
0% {
  right: 0px;
}
100%{
  right: -150px;
}
}

@-moz-keyframes rightbotimg /* Firefox */
{
0% {
  right: 0px;
}
100%{
  right: -150px;
}
}

@-webkit-keyframes rightbotimg /* Safari 和 Chrome */
{
0% {
  right: 0px;
}
100%{
  right: -150px;
}
}

@-o-keyframes rightbotimg /* Opera */
{
0% {
  right: 0px;
}
100%{
  right: -150px;
}
}
</style>
